<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    <title>Quick – Website UI Kit (FREE)</title>
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>
    <!-- Favicon -->
    <link rel="icon" href="../../assets/img/brand/favicon.png" type="image/png"><!-- Font Awesome -->
    <link rel="stylesheet" href="../../assets/libs/@fortawesome/fontawesome-free/css/all.min.css">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="../../assets/css/quick-website.css">
    <!-- Docs CSS - used only for demo -->
    <link rel="stylesheet" href="../../docs/assets/css/docs.css">
</head>

<body class="docs">
    <!-- Nav -->
    <header class="header" id="header-main">
        <!-- Main navbar -->
        <nav class="navbar navbar-main navbar-expand-lg fixed-top navbar-shadow navbar-light bg-white border-bottom" id="navbar-main">
            <div class="container-fluid justify-content-between">
                <!-- User's navbar -->
                <div class="navbar-user d-lg-none">
                    <ul class="navbar-nav flex-row align-items-center">
                        <li class="nav-item">
                            <a href="#" class="nav-link nav-link-icon sidenav-toggler" data-action="sidenav-pin" data-target="#sidenav-main"><i data-feather="menu"></i></a>
                        </li>
                    </ul>
                </div>
                <!-- Navbar brand -->
                <a class="navbar-brand" href="../../docs/index.html">
                    <img alt="Image placeholder" src="../../assets/img/brand/dark.svg" id="navbar-logo">
                    <sup class="text-muted text-xs text-uppercase">Docs</sup>
                </a>
                <!-- Live preview -->
                <ul class="navbar-nav flex-row align-items-center d-lg-none">
                    <li class="nav-item">
                        <a href="../../index.html" class="nav-link nav-link-icon"><i data-feather="eye"></i></a>
                    </li>
                </ul>
                <!-- Navbar nav -->
                <div class="collapse navbar-collapse" id="navbar-main-collapse">
                    <!-- Right menu -->
                    <ul class="navbar-nav align-items-center mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="../../docs/getting-started/quick-start.html">Getting started</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../../docs/components/alerts.html">Components</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://github.com/webpixels/quick-website-ui-kit-demo/issues" target="_blank">Support</a>
                        </li>
                    </ul>
                </div>
                <a href="../../index.html" class="btn btn-sm btn-primary ml-4 btn-icon d-none d-lg-inline-flex">
                    <span class="btn-inner--icon"><i data-feather="chevron-left"></i></span>
                    <span class="btn-inner--text">Back to Quick</span>
                </a>
            </div>
        </nav>
    </header>
    <div class="container-fluid container-docs">
        <!-- Sidenav -->
        <nav class="sidenav navbar navbar-vertical navbar-expand-xs navbar-light bg-white" id="sidenav-main">
            <div class="scrollbar-inner px-4">
                <!-- Navigation -->
                <div class="docs-sidebar pt-6 pt-lg-7">
                    <h6 class="mt-4">Getting started</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/getting-started/quick-start.html" class="nav-link">Quick start</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/getting-started/build-tools.html" class="nav-link">Build tools</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Styleguide</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/styleguide/colors.html" class="nav-link active">Colors</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/styleguide/typography.html" class="nav-link">Typography</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/styleguide/icons.html" class="nav-link">Icons</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Components</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/components/alerts.html" class="nav-link">Alerts</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/avatar.html" class="nav-link">Avatar</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/badge.html" class="nav-link">Badge</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/breadcrumb.html" class="nav-link">Breadcrumb</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/buttons.html" class="nav-link">Buttons</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/card.html" class="nav-link">Card</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/collapse.html" class="nav-link">Collapse</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/dropdowns.html" class="nav-link">Dropdowns</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/forms.html" class="nav-link">Forms</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/input-group.html" class="nav-link">Input group</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/modal.html" class="nav-link">Modal</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/navs.html" class="nav-link">Navs</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/navbar.html" class="nav-link">Navbar</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/pagination.html" class="nav-link">Pagination</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/popovers.html" class="nav-link">Popovers</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/progress.html" class="nav-link">Progress</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/spinners.html" class="nav-link">Spinners</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/tables.html" class="nav-link">Tables</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/toasts.html" class="nav-link">Toasts</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/components/tooltips.html" class="nav-link">Tooltips</a>
                        </li>
                    </ul>
                    <h6 class="mt-4">Plugins</h6>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="../../docs/plugins/animate.html" class="nav-link">Animate</a>
                        </li>
                        <li class="nav-item">
                            <a href="../../docs/plugins/google-maps.html" class="nav-link">Google maps</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Main content -->
        <div class="main-content row position-relative pb-5">
            <div class="col-xl-9 docs-content pb-5">
                <!-- Docs title -->
                <div class="docs-title">
                    <h1>Colors</h1>
                    <p class="lead mb-0">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
                </div>
                <!-- Docs content -->
                <h2 id="theme-colors">Theme colors</h2>
                <p>Primary theme colors are used for elements that must reflect the brand’s identity. Each color has a darker and a lighter shade. These can be customized to represent your brand identity using Sass and our build tools.</p>
                <div class="row color-palette">
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Primary">
                            <div class="color bg-light-primary">
                                <span class="color-name">.bg-light-primary</span>
                                <!-- <span class="color-code">#6e00ff</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Primary">
                            <div class="color bg-primary">
                                <span class="color-name">.bg-primary</span>
                                <!-- <span class="color-code">#6e00ff</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Primary">
                            <div class="color bg-dark-primary">
                                <span class="color-name">.bg-dark-primary</span>
                                <!-- <span class="color-code">#6e00ff</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Secondary">
                            <div class="color bg-light-secondary">
                                <span class="color-name">.bg-light-secondary</span>
                                <!-- <span class="color-code">#e8f2ff</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Secondary">
                            <div class="color bg-secondary">
                                <span class="color-name">.bg-secondary</span>
                                <!-- <span class="color-code">#e8f2ff</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Secondary">
                            <div class="color bg-dark-secondary">
                                <span class="color-name">.bg-dark-secondary</span>
                                <!-- <span class="color-code">#e8f2ff</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Success">
                            <div class="color bg-light-success">
                                <span class="color-name">.bg-light-success</span>
                                <!-- <span class="color-code">#00c759</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Success">
                            <div class="color bg-success">
                                <span class="color-name">.bg-success</span>
                                <!-- <span class="color-code">#00c759</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Success">
                            <div class="color bg-dark-success">
                                <span class="color-name">.bg-dark-success</span>
                                <!-- <span class="color-code">#00c759</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Danger">
                            <div class="color bg-light-danger">
                                <span class="color-name">.bg-light-danger</span>
                                <!-- <span class="color-code">#ff0033</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Danger">
                            <div class="color bg-danger">
                                <span class="color-name">.bg-danger</span>
                                <!-- <span class="color-code">#ff0033</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Danger">
                            <div class="color bg-dark-danger">
                                <span class="color-name">.bg-dark-danger</span>
                                <!-- <span class="color-code">#ff0033</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Warning">
                            <div class="color bg-light-warning">
                                <span class="color-name">.bg-light-warning</span>
                                <!-- <span class="color-code">#ff3b00</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Warning">
                            <div class="color bg-warning">
                                <span class="color-name">.bg-warning</span>
                                <!-- <span class="color-code">#ff3b00</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Warning">
                            <div class="color bg-dark-warning">
                                <span class="color-name">.bg-dark-warning</span>
                                <!-- <span class="color-code">#ff3b00</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Info">
                            <div class="color bg-light-info">
                                <span class="color-name">.bg-light-info</span>
                                <!-- <span class="color-code">#73e9ef</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Info">
                            <div class="color bg-info">
                                <span class="color-name">.bg-info</span>
                                <!-- <span class="color-code">#73e9ef</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Info">
                            <div class="color bg-dark-info">
                                <span class="color-name">.bg-dark-info</span>
                                <!-- <span class="color-code">#73e9ef</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light Dark">
                            <div class="color bg-light-dark">
                                <span class="color-name">.bg-light-dark</span>
                                <!-- <span class="color-code">#343a40</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark">
                            <div class="color bg-dark">
                                <span class="color-name">.bg-dark</span>
                                <!-- <span class="color-code">#343a40</span> -->
                            </div>
                        </div>
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dark Dark">
                            <div class="color bg-dark-dark">
                                <span class="color-name">.bg-dark-dark</span>
                                <!-- <span class="color-code">#343a40</span> -->
                            </div>
                        </div>
                    </div>
                </div>
                <h3 id="gradient">Gradient</h3>
                <p>We love gradients. That is why we created these variations that are built dynamically based on the theme’s colors described above. By changing a theme color the gradient will adapt.</p>
                <div class="row color-palette">
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Primary">
                            <div class="color bg-gradient-primary">
                                <span class="color-name">.bg-gradient-primary</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Secondary">
                            <div class="color bg-gradient-secondary">
                                <span class="color-name">.bg-gradient-secondary</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Success">
                            <div class="color bg-gradient-success">
                                <span class="color-name">.bg-gradient-success</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Danger">
                            <div class="color bg-gradient-danger">
                                <span class="color-name">.bg-gradient-danger</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Warning">
                            <div class="color bg-gradient-warning">
                                <span class="color-name">.bg-gradient-warning</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Info">
                            <div class="color bg-gradient-info">
                                <span class="color-name">.bg-gradient-info</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Gradient Dark">
                            <div class="color bg-gradient-dark">
                                <span class="color-name">.bg-gradient-dark</span>
                            </div>
                        </div>
                    </div>
                </div>
                <h3 id="translucent">Translucent</h3>
                <p>If you want add a little transparency to your backgrounds you can use the <code class="highlighter-rouge">.bg-translucent-*</code> modifier class. The opacity level can be modified from the variables file.</p>
                <div class="row color-palette">
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Primary">
                            <div class="color bg-translucent-primary">
                                <span class="color-name">.bg-translucent-primary</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Secondary">
                            <div class="color bg-translucent-secondary">
                                <span class="color-name">.bg-translucent-secondary</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Success">
                            <div class="color bg-translucent-success">
                                <span class="color-name">.bg-translucent-success</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Danger">
                            <div class="color bg-translucent-danger">
                                <span class="color-name">.bg-translucent-danger</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Warning">
                            <div class="color bg-translucent-warning">
                                <span class="color-name">.bg-translucent-warning</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Info">
                            <div class="color bg-translucent-info">
                                <span class="color-name">.bg-translucent-info</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Translucent Dark">
                            <div class="color bg-translucent-dark">
                                <span class="color-name">.bg-translucent-dark</span>
                            </div>
                        </div>
                    </div>
                </div>
                <h3 id="text-colors">Text colors</h3>
                <div class="docs-example">
                    <a class="d-inline-block text-sm text-muted mb-3 text-underline--dashed" data-toggle="collapse" href="#text-colors" role="button" aria-expanded="false" aria-controls="text-colors">
                        Show code
                    </a>
                    <!-- Result -->
                    <div class="tab-example-result">
                        <p class="text-primary">.text-primary</p>
                        <p class="text-secondary">.text-secondary</p>
                        <p class="text-success">.text-success</p>
                        <p class="text-danger">.text-danger</p>
                        <p class="text-warning">.text-warning</p>
                        <p class="text-info">.text-info</p>
                        <p class="text-light bg-dark">.text-light</p>
                        <p class="text-dark">.text-dark</p>
                        <p class="text-body">.text-body</p>
                        <p class="text-muted">.text-muted</p>
                        <p class="text-white bg-dark">.text-white</p>
                        <p class="text-black-50">.text-black-50</p>
                        <p class="text-white-50 bg-dark">.text-white-50</p>
                    </div><!-- Code -->
                    <div class="position-relative collapse fade mt-3" id="text-colors">
                        <!-- For users -->
                        <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">&gt;</span>.text-primary<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-secondary"</span><span class="nt">&gt;</span>.text-secondary<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">&gt;</span>.text-success<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">&gt;</span>.text-danger<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">&gt;</span>.text-warning<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">&gt;</span>.text-info<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-light bg-dark"</span><span class="nt">&gt;</span>.text-light<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-dark"</span><span class="nt">&gt;</span>.text-dark<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">&gt;</span>.text-body<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>.text-muted<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-white bg-dark"</span><span class="nt">&gt;</span>.text-white<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-black-50"</span><span class="nt">&gt;</span>.text-black-50<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-white-50 bg-dark"</span><span class="nt">&gt;</span>.text-white-50<span class="nt">&lt;/p&gt;</span></code></pre>
                        </figure>
                    </div>
                </div>
                <h2 id="gray-colors">Gray colors</h2>
                <p>Grey colors are used for text, backgrounds, lines and borders. The grays from 100 to 300 are used for backgrounds, while the ones from 400 to 600 are used for icons.</p>
                <div class="row color-palette">
                    <div class="col-lg-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Black">
                            <div class="color bg-black">
                                <span class="color-name">.bg-black</span>
                                <!-- <span class="color-code"></span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light ">
                            <div class="color bg-gray-">
                                <span class="color-name">.bg-gray-</span>
                                <!-- <span class="color-code"></span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light ">
                            <div class="color bg-gray-">
                                <span class="color-name">.bg-gray-</span>
                                <!-- <span class="color-code"></span> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Light ">
                            <div class="color bg-gray-">
                                <span class="color-name">.bg-gray-</span>
                                <!-- <span class="color-code"></span> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="color-palette mt-4">
                    <div class="color-group">
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 100">
                            <div class="color bg-gray-100">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 200">
                            <div class="color bg-gray-200">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 300">
                            <div class="color bg-gray-300">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 400">
                            <div class="color bg-gray-400">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 500">
                            <div class="color bg-gray-500">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 600">
                            <div class="color bg-gray-600">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 700">
                            <div class="color bg-gray-700">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 800">
                            <div class="color bg-gray-800">
                            </div>
                        </div>
                        <div class="color-item color-item-light" data-toggle="tooltip" data-original-title="Light 900">
                            <div class="color bg-gray-900">
                            </div>
                        </div>
                    </div>
                </div>
                <h2 id="brand-colors">Brand colors</h2>
                <div class="row color-palette">
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Facebook">
                            <div class="color bg-brand-facebook">
                                <span class="color-name">.bg-brand-facebook</span>
                                <span class="color-code">#3b5999</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Twitter">
                            <div class="color bg-brand-twitter">
                                <span class="color-name">.bg-brand-twitter</span>
                                <span class="color-code">#1da1f2</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Google-plus">
                            <div class="color bg-brand-google-plus">
                                <span class="color-name">.bg-brand-google-plus</span>
                                <span class="color-code">#dd4b39</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Instagram">
                            <div class="color bg-brand-instagram">
                                <span class="color-name">.bg-brand-instagram</span>
                                <span class="color-code">#e4405f</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Pinterest">
                            <div class="color bg-brand-pinterest">
                                <span class="color-name">.bg-brand-pinterest</span>
                                <span class="color-code">#bd081c</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Youtube">
                            <div class="color bg-brand-youtube">
                                <span class="color-name">.bg-brand-youtube</span>
                                <span class="color-code">#cd201f</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Vimeo">
                            <div class="color bg-brand-vimeo">
                                <span class="color-name">.bg-brand-vimeo</span>
                                <span class="color-code">#04A0F0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Slack">
                            <div class="color bg-brand-slack">
                                <span class="color-name">.bg-brand-slack</span>
                                <span class="color-code">#3aaf85</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 my-3 color-group">
                        <div class="color-item color-item-dark" data-toggle="tooltip" data-original-title="Dribbble">
                            <div class="color bg-brand-dribbble">
                                <span class="color-name">.bg-brand-dribbble</span>
                                <span class="color-code">#ea4c89</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 docs-sidebar d-none d-xl-block">
                <div class="toc-sidebar pl-4 mt-lg-8 border-left">
                    <div class="scrollbar-inner">
                        <h6 class="mb-3">Summary</h6>
                        <ul class="section-nav">
                            <li class="toc-entry toc-h2"><a href="#theme-colors">Theme colors</a>
                                <ul>
                                    <li class="toc-entry toc-h3"><a href="#gradient">Gradient</a></li>
                                    <li class="toc-entry toc-h3"><a href="#translucent">Translucent</a></li>
                                    <li class="toc-entry toc-h3"><a href="#text-colors">Text colors</a></li>
                                </ul>
                            </li>
                            <li class="toc-entry toc-h2"><a href="#gray-colors">Gray colors</a></li>
                            <li class="toc-entry toc-h2"><a href="#brand-colors">Brand colors</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <!-- Scripts -->
    <!-- Core JS  -->
    <script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="../../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../assets/libs/svg-injector/dist/svg-injector.min.js"></script>
    <script src="../../assets/libs/feather-icons/dist/feather.min.js"></script>
    <!-- Docs JS -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
    <script src="../../assets/libs/clipboard/dist/clipboard.min.js"></script>
    <!-- Quick JS -->
    <script src="../../assets/js/quick-website.js"></script>
    <!-- Feather Icons -->
    <script>
        feather.replace({
            'width': '1em',
            'height': '1em'
        })
    </script>
</body>

</html>